"use client";

import React, { useState, useRef } from "react";
// @ts-ignore
import { SlotMachine } from "@lucky-canvas/react";

export default function LuckySlotMachinePage() {
    const [blocks] = useState([
        { padding: "10px", background: "#869cfa" },
        { padding: "10px", background: "#e9e8fe" },
    ]);
    const [slots] = useState([
        { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
        { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
        { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
    ]);
    const [prizes] = useState([
        { fonts: [{ text: '0', top: '15%' }] },
        { fonts: [{ text: '1', top: '15%' }] },
        { fonts: [{ text: '2', top: '15%' }] },
        { fonts: [{ text: '3', top: '15%' }] },
        { fonts: [{ text: '4', top: '15%' }] },
        { fonts: [{ text: '5', top: '15%' }] },
        { fonts: [{ text: '6', top: '15%' }] },
        { fonts: [{ text: '7', top: '15%' }] },
        { fonts: [{ text: '8', top: '15%' }] },
        { fonts: [{ text: '9', top: '15%' }] },
    ]);
    const [defaultStyle] = useState({
        borderRadius: Infinity,
        background: "#bac5ee",
        fontSize: "32px",
        fontColor: "#333",
    });
    const [defaultConfig] = useState({
        rowSpacing: "25px",
        colSpacing: "10px",
    });
    const [buttons] = useState([
        { radius: '40%', background: '#617df2' },
        { radius: '35%', background: '#afc8ff' },
        {
            radius: '30%', background: '#869cfa',
            pointer: true,
            fonts: [{ text: '开始', top: '-10px' }]
        }
    ])
    const myLucky = useRef<never>(null);

    return (
        <div>
            <SlotMachine
                ref={myLucky}
                width="240px"
                height="180px"
                blocks={blocks}
                slots={slots}
                prizes={prizes}
                defaultStyle={defaultStyle}
                defaultConfig={defaultConfig}
                buttons={buttons}
                onStart={() => {
                    // 开始抽奖
                    // @ts-ignore
                    // const res = [
                    //     [9, 9, 6],
                    //     [0, 0, 7],
                    //     [6, 6, 6],
                    //     [8, 8, 8]
                    // ]
                    myLucky.current.play();
                    setTimeout(() => {
                        // const index = res[Math.random() * 4 >> 0]
                        // @ts-ignore
                        // console.log(index)
                        myLucky.current.stop( );
                    }, 500);
                }}
                onEnd={(prize: { fonts: { text: never; }[]; }) => {
                    // 抽奖结束
                    alert(`恭喜你抽到 ${prize.fonts[0].text}`);
                }}
            />
            <button
                onClick={() => {
                    // @ts-ignore
                    myLucky.current.play();
                }}
            >
                开始
            </button>
        </div>
    );
}
